<template>
  <div class="mtop-20 mleft-100">
    <el-card>
      <div class="artist-info">
        <div class="img-wrap">
          <img
            :src="artistInfo.cover"
            class="img-h img-radius-8 img-border"
            alt=""
          />
        </div>
        <div class="info">
          <div class="font-24 font-bold">{{ artistInfo.name }}</div>
          <div class="info-btn">
            <button class="btn btn-white mleft-10" v-if="!isSub" @click="subArtist(1)">
              <span><i class="el-icon-folder-add"></i>收藏</span>
            </button>
            <button class="btn btn-white mleft-10" v-else @click="subArtist(0)">
              <span><i class="el-icon-folder-checked"></i>已收藏</span>
            </button>
          </div>
          <div>
            <span class="font-14">单曲数：{{ artistInfo.musicSize }}</span>
            <span class="font-14 mleft-20"
              >专辑数：{{ artistInfo.albumSize }}</span
            >
            <span class="font-14 mleft-20">MV数：{{ artistInfo.mvSize }}</span>
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName">
        <!-- 专辑 -->
        <el-tab-pane label="专辑" name="first">
          <TopFiftyList :list="topList"></TopFiftyList>
          <AlbumList
            v-for="(item, index) in albumList"
            :key="index"
            :albumInfo="item.album"
            :list="item.songs"
          ></AlbumList>
          <el-pagination
          @current-change="handleCurrentChange"
          :current-page="albumPageNo"
          :page-size="5"
          layout="prev, pager, next"
          :total="artistInfo.albumSize"
          align="center"
          background
        >
      </el-pagination>
        </el-tab-pane>
        <!-- MV -->
        <el-tab-pane label="MV" name="second">
          <MvList :list="mvList" :disable=true></MvList>
        </el-tab-pane>
        <!-- 歌手详情 -->
        <el-tab-pane label="歌手详情" name="third">
          <div v-if="introduction.length === 0">没有歌手详情</div>
          <div v-else>
            <div class="mtop-20 font-20" v-for="text in introduction" :key="text.ti">
              <h2 class="font-bold">{{text.ti}}</h2>
              <div
                class="my-pre font-14"
                v-for="(t ,index) in text.txt"
                :key="index"
              ><p>{{t}}</p></div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 相似歌手 -->
        <el-tab-pane label="热门歌手" name="fourth">
          <div v-if="topArtistList.length === 0">没有热门歌手</div>
          <ImgList
          @clickImg="toArtistDetail"
          :list="topArtistList"
          type="artist"
          :isLoading="isLoading"
          >
            <template v-slot="{item}">
              <div class="text-hidden">
                {{item.name}}
              </div>
            </template>
          </ImgList>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import AlbumList from "@/components/list/AlbumList";
import TopFiftyList from "@/components/list/TopFiftyList";
import MvList from "@/components/list/MvList"
import ImgList from "@/components/list/ImgList"
import {
  getArtistDetail,
  getArtistTop,
  getArtistAlbum,
  getArtistMV,
  getTopArtist,
  getArtistIntro,
  getAlbumDetail,
  setArtistSub
} from "@/api/request";
import { mapState } from "vuex";
export default {
  components: { AlbumList, TopFiftyList ,MvList ,ImgList},
  data() {
    return {
      id: 0,
      artistInfo: {
        //歌手的信息
        name: "",
        cover: "",
        briefDesc: "",
        albumSize: 0,
        musicSize: 0,
        mvSize: 0,
      },
      albumPageNo: 1,
      albumOffset: 1,
      activeName: "first",
      topList: [],
      albumList: [],
      mvList:[],
      introduction:[],
      topArtistList:[],
      isLoading:false,
      isSub:false,
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getArtistInfo();
    this.getTop();
    this.getAlbum();
    this.getMv();
    this.getIntroduction();
    this.getTopArtist();
  },
  computed:{
    ...mapState(['isLogin']),
  },
  methods: {
    // 获取歌手详情
    async getArtistInfo() {
      const { data: res } = await getArtistDetail(this.id);
      if (res.code !== 200) return;
      this.artistInfo = Object.freeze(res.data.artist);
    },
    // 歌手热门歌曲
    async getTop() {
      const { data: res } = await getArtistTop(this.id);
      if (res.code !== 200) return;
      this.topList = res.songs;
    },
    //歌手专辑
    async getAlbum() {
      const { data: res } = await getArtistAlbum({
        id: this.id,
        limit: 5,
        offset: (this.albumPageNo - 1) * 5,
      });
      if (res.code !== 200) return;
      this.albumList = [];
      res.hotAlbums.forEach((item) => {
        this.getAlbumDetail(item.id);
      });
    },
    // 专辑详情
    async getAlbumDetail(id) {
      const { data: res } = await getAlbumDetail(id);
      if (res.code !== 200) return;
      this.albumList.push(Object.freeze(res));
    },
    // 分页器
    handleCurrentChange(val){
      this.albumPageNo = val;
      this.$scrollTo();
      this.getAlbum();
    },
    // 歌手mv
    async getMv(){
      const {data:res} = await getArtistMV(this.id);
      if(res.code !== 200) return;
      this.mvList = Object.freeze(res.mvs);
    },
    //歌手详情
    async getIntroduction(){
      const {data:res}= await getArtistIntro(this.id);
      if(res.code !== 200) return;
      res.introduction.forEach((item) => {
        item.txt = item.txt.split('\n');
      })
      if(res.briefDesc){
        res.introduction.unshift({
          ti:'个人简介',
          txt:[res.briefDesc]
        })
      };
      this.introduction = Object.freeze(res.introduction);
    },
    // 相似歌手
    async getTopArtist(){
     const {data:res} = await getTopArtist();
     if(res.code !== 200) return ;
     this.topArtistList = res.artists;
    },
    toArtistDetail(id){
       this.$router.push('/artistdetail/' + id);
       location.reload(true);
    },
    //收藏取消歌手
    async subArtist(type){
      if(!this.isLogin) return this.$message.error('需要登录');
      let cencel = false ;
      if(this.isSub){
        await this.$confirm('此操作将取消收藏, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cancel = false;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          }); 
        });
      }
      if(cencel) return;
      const {data:res} = await setArtistSub(this.id , type);
      console.log(res);
      if(res.code !== 200) return;
      this.isSub = !this.isSub;
      if(type == 1) return this.$message.success('收藏成功');
      else return this.$message.success('取消收藏成功');
    }
  },
};
</script>

<style lang="less" scoped>
.artist-info {
  height: 200px;
  display: flex;
  .img-wrap {
    width: 250px;
    height: 200px;
  }
  .info {
    margin-left: 30px;
    line-height: 50px;
  }
}
.my-pre{
  text-indent: 2em;
  line-height: 2;
  width: 100%;
  p{
    color: #676767;
  }
}
/deep/.el-tabs__item.is-active {
  color: #ff2727;
  font-size: 20px;
  font-weight: 500;
}
/deep/.el-tabs__item:hover {
  color: #ff2727;
  font-size: 20px;
  font-weight: 500;
}
/deep/.el-tabs__active-bar {
  background-color: #ff2727;
  height: 5px;
  border-radius: 50px;
}
</style>